import React, { Component } from 'react';
import {
  Button,
  StyleSheet,
  TouchableOpacity,
  View
} from 'react-native';
import { RNCamera } from 'react-native-camera';
import { SafeAreaView } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';

const flashModeOrder = {
  off: 'on',
  on: 'auto',
  auto: 'torch',
  torch: 'off',
};
const flashModeIcon = {
  off: 'ios-flash-outline',
  on: 'ios-flash',
  auto: 'md-flash',
  torch: 'md-bulb',
};

export default class Cameraold extends Component {
  constructor (props) {
    super(props);
    this.state = {
      type: false,
      flash: 'off',
      ratio: ''
    }
  }
  static navigationOptions = {
    header: null,
  }
  toggleFlash = () => {
    this.setState({
      flash: flashModeOrder[this.state.flash],
    });
  };
  clickTest = () => {
    // this.camera.getSupportedRatiosAsync().then(res => {
    //   console.log(res);
    // }).catch(err => {
    //   console.log(err);
    // })
  };
  takePicture = async () => {
    if (this.camera) {
      const options = { quality: 0.5, base64: true };
      const data = await this.camera.takePictureAsync(options);
      console.log(data.uri);
      console.log(data.width);
      console.log(data.height);
    }
  };

  render() {
    return (
      <View style={styles.container}>
        <RNCamera
          ref={ref => this.camera = ref}
          style = {styles.preview}
          type={this.state.type ? RNCamera.Constants.Type.front : RNCamera.Constants.Type.back}
          flashMode={RNCamera.Constants.FlashMode[this.state.flash]}
          barCodeTypes={[RNCamera.Constants.BarCodeType.qr]}
          onBarCodeRead={({ data, type }) => {
            this.props.navigation.goBack();
            console.log(data);
            console.log(type);
          }}
          permissionDialogTitle={'Permission to use camera'}
          permissionDialogMessage={'We need your permission to use your camera phone'}
        >
          <View style={{ flex: 0, flexDirection: 'row', justifyContent: 'flex-end' }}>
            {!this.state.type &&
              <TouchableOpacity
                style={{ paddingHorizontal: 20, paddingVertical: 10 }}
                onPress={this.toggleFlash}
              >
                <Ionicons name={flashModeIcon[this.state.flash]} size={32} color={'#ffffff'} />
              </TouchableOpacity>
            }
            <TouchableOpacity
              style={{ paddingHorizontal: 20, paddingVertical: 10 }}
              onPress={() => { this.setState({ type: !this.state.type }) }}
            >
              <Ionicons name={'ios-reverse-camera-outline'} size={32} color={'#ffffff'} />
            </TouchableOpacity>
          </View>
          <View style={{flex: 0, flexDirection: 'row', justifyContent: 'center',}}>
            <TouchableOpacity
              onPress={this.takePicture}
            >
              <Ionicons name={'ios-camera-outline'} size={48} color={'#ffffff'} />
            </TouchableOpacity>
          </View>
        </RNCamera>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
    backgroundColor: 'black'
  },
  preview: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between',
    paddingTop: 48,
    paddingBottom: 40
  }
});
